import { Button, Modal, Select, Space } from 'antd';
import React from 'react';

class ClassAndFun extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      count: 0,
      value: '1',
    } as any;
    this.getSum4 = this.getSum4.bind(this);
  }
  getSum1() {
    console.log(this, '第一种情况');
    console.log(this.state);
  }
  getSum2 = () => {
    console.log(this, '第二种情况');
    console.log(this.state);
  };
  getSum3() {
    console.log(this, '第三种情况');
    console.log(this.state);
  }
  getSum4() {
    console.log(this, '第四种情况');
    console.log(this.state);
  }
  changeCount() {
    this.setState({
      count: this.state.count + 1,
    });
  }
  getCount() {
    
  }

  render() {
    const getSum5 = () => {
      console.log(this, '第五种情况');
      console.log(this.state);
    };

    const arr = [
      {
        label: '1',
        value: '1',
      },
      {
        label: '2',
        value: '2',
      },
    ];

    // const

    return (
      <>
        <Space>
          <Button
            onClick={() => {
              this.getSum1();
            }}
          >
            1 赋值时使用箭头函数
          </Button>
          <Button onClick={this.getSum2}>2 声明是使用箭头函数</Button>
          <Button onClick={this.getSum3.bind(this)}>
            3 第三种赋值时使用bind绑定
          </Button>
          <Button onClick={this.getSum4}>
            4 在constructor声明一个同名的函数, 并使用bind赋值
          </Button>
          <Button onClick={() => this.changeCount()}>点击count+1</Button>
          <Button onClick={getSum5}>
            5 第五种情况, 直接在render中声明一个函数
          </Button>
        </Space>
        <Space>{this.state.count}</Space>
        <Select
          options={arr}
          onChange={(value) => {
            this.setState({
              value,
            });
          }}
          value={this.state.value}
        />
        <Button onClick={() =>{
					setTimeout(() => {
						Modal.confirm({
							title: this.state.value,
						});
					}, 3000);
				}}>
					点击获取选中值
				</Button>
      </>
    );
  }
}
export default ClassAndFun;
